<template>
  <Container class="role-edit">
    <div class="container-header title title-center" slot="header">
      {{ title }}
      <Button size="large" class="fl btn-back"  icon="ios-arrow-back" @click="jumpPrevPage">返回</Button>
    </div>
    <div class="bg-light pt clear mb">
      <Form :label-width="80" :model="form" ref="form" :rules="ruleValidate">
        <FormItem label="用户名" prop="username">
          <Input :maxlength="20" class="wp40" v-model.trim="form.username" placeholder="请输入2-20位字符的用户名"/>
        </FormItem>
        <FormItem label="密码" prop="password">
          <Input type="password" :maxlength="20" class="wp40" v-model.trim="form.password" placeholder="请输入2-20位字符的密码"/>
        </FormItem>
        <FormItem label="联系电话" prop="phone">
          <Input :maxlength="20" class="wp40" v-model.trim="form.phone" placeholder="请输入联系电话"/>
        </FormItem>
        <FormItem label="角色" >
          <RadioGroup v-model="form.role_id">
            <Radio v-for="(item, index) of data2" :key="index" :label="item.id">{{item.label}}</Radio>
          </RadioGroup>
        </FormItem>
      </Form>
    </div>
    <!-- <div class="bg-light pt clear mb">
      <Tree ref="tree" :data="data2" show-checkbox @on-check-change="onCheckChange"></Tree>
    </div> -->
    <Loader :status="status" @refresh="getInfo"></Loader>
    <div class="container-footer bg-white" slot="footer">
      <div v-if="!isSystem">
        <Button type="primary" class="mr" size="large" :disabled="isDisabled" @click="onSave">确定</Button>
      </div>
      <div v-else>
        <Tooltip>
          <Button type="primary" class="mr" size="large" :disabled="isDisabled">确定</Button>
          <div slot="content">
            <p>提示：</p>
            <p>因规则原因无法编辑系统内置角色</p>
          </div>
        </Tooltip>
      </div>
    </div>
  </Container>
</template>
<script>
export default {
  data() {
    const validateName = (rule, value, callback) => {
      if (value.trim() === '') {
        callback(new Error('请输入用户名'))
      } else {
        if (value.length < 2) {
          callback(new Error('用户名在2-20个字之间'))
        }
        callback()
      }
    }
    const validateMobile = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else if (value.length != 11) {
        callback(new Error('请输入正确的手机号'))
      } else if (!telReg.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    return {
      data2: [],
      id: this.$route.query.id || '',
      title: '',
      status: 'pass',
      isSystem: false,
			isDisabled: false,
      form: {
				username: '',
        password: '',
        phone: '',
        role_id: '',
        yanPass: ''
      },
      toStageData: {},
      ruleValidate: {
        username: [{ required: true, validator: validateName, trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        // phone: [
        //   { required: true, validator: validateMobile, trigger: 'blur' }
        // ]
      },
      selectCheck: [], //现在勾选的权限id
      getCheck: [] //原来的选中权限id
    }
  },
  mounted() {
    this.getTree()
    // this.$refs.form.resetFields()
    if (this.id) {
      this.title = '编辑管理员'
    } else {
      this.title = '新增管理员'
    }
  },
  methods: {
    getInfo() {
			this.status = 'loading'
      this.$ajaxGet(`/user/adminInfo`, {user_id: this.id}).then(data => {
        this.form.username = data.user_name
        this.form.password = data.password
        this.form.yanPass = data.password
        this.form.phone = data.phone
        this.form.user_id = data.user_id
        this.form.role_id = data.role_id
        this.status = 'pass'
      }).catch(() => {
        this.status = 'error'
      })
    },
    getTree() {
      this.$ajaxGet('/user/roleList', {is_department: 0}).then(data => {
        this.data2 = (data || []).map((item) => {
          return {
            id: item.id,
            label: item.name
          }
        })
        if(this.id) {
          this.getInfo()
        }
      })
    },
    onSave() {
      if (this.isDisabled) return
      this.$refs['form'].validate(valid => {
        if (valid) {
          // if (this.selectCheck.length == 0) {
          //   this.$Message.error('请选择权限')
          //   return
          // }
					this.toStageData.username = this.form.username
          this.toStageData.password = this.form.password
          this.toStageData.phone = this.form.phone
          this.toStageData.role_id = this.form.role_id
          this.isDisabled = true
          let url = this.id ? '/user/editAdmin' : '/user/addAdmin'
          let text = this.id ? '编辑' : '新增'
          if(this.id)	 {
            this.toStageData.user_id = this.id
            if (this.form.yanPass == this.form.password) {
              delete this.toStageData.password
            }
          }
          console.log(this.toStageData)
          this.status = 'loading'
          this.$jsonPost(url, this.toStageData).then(data => {
            this.status = 'pass'
            this.$Notice.success({
              title: `${text}成功`
            })
            this.$router.push('/setting/admin/list')
          }).catch(() => {
            this.isDisabled = false
            this.status = 'pass'
          })
        }
      })
    },
    jumpPrevPage() {
      this.$router.back()
    }
  }
}
</script>